<template>
    <a-button type="primary" @click="openGroupModal">
        <PlusOutlined /> 新增业务方法
    </a-button>
    <DynamicTable show-index :data-request="loadTableData" :columns="columns">
    </DynamicTable>
</template>


<script setup lang="tsx">
import { ref, reactive, computed, onMounted, h, watch, unref, defineComponent } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import {
    baseColumns,
    type TableListItem,
    type TableColumnItem
} from '@/components/design/components/FlowPanel/columns';
import type { LoadDataParams } from '@/components/core/dynamic-table';
import { useTable } from '@/components/core/dynamic-table';
import { useModal } from '@/hooks/useModal/useModal';
import MethodDetail from '@/components/design/components/FlowPanel/methodDetail.vue';
import { cloneDeep } from 'lodash-es';
import { businessMethods } from '@/store/modules/businessMethod';

defineOptions({
    name: 'businessMethod',
});
defineComponent({
    MethodDetail
})
const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: false, }, showTableSetting: false, showToolBar: false, search: false });
const [ModalRender, modalRef] = useModal();
const methodDetailRef = ref<FormInstance>();
type blankDataType = API.AddBusinessMethod;

const businessMethodStore = businessMethods();

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
    /[xy]/g,
    function (c) {
      var r = (Math.random() * 16) | 0,
        v = c == 'x' ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    }
  );
}

const blankData: blankDataType = {
    id: uuidv4(),
    processDefinitionId: '',
    methodName: '',
    methodCode: '',
    methodType: '',
    methodContext: '',
};
const editDrawerBindValue = reactive({
    method: blankData   
});

/**
 * @description 打开用户弹窗
 */
const openGroupModal = async (record: Partial<TableListItem> = {}) => {      
    editDrawerBindValue.method = record.id?{...record}:{...blankData};  
    ModalRender.show({
        title: `${record.id ? '编辑' : '新增'}方法`,
        width: '50%',
        // 是否显示右上角确定取消
        defaultExtra: true,
        destroyOnClose: true,
        content: () => {        
        return <MethodDetail  ref={methodDetailRef} defaultData={unref(editDrawerBindValue)}></MethodDetail>;
        },
        // 确定方法执行
        onOk: async (values) => {            
            const [methodInfo,methodRef] = await methodDetailRef.value?.handleSubmit();
            let { hasValue, bizMethod } = businessMethodStore.getBusinessMethodById(methodInfo.id);            

            if(hasValue)
               //todo: 没有测试过，可能有bug
               businessMethodStore.updateBusinessMethodById(methodInfo.id,methodInfo)
            else
              businessMethodStore.addBusinessMethod(methodInfo);                
            loadTableData();   
        },
  });
  
};

/**
 * @description 表格删除行
 */
const delRowConfirm = async (id) => {
    businessMethodStore.removeBusinessMethod(id);
    loadTableData();    
};

const loadTableData = async () => {           
    let allMethonds = businessMethodStore.getAllMethods();
    let methodTotal = allMethonds.length===0?0:allMethonds.length;
    const tablelist = {
        list: allMethonds,        
        pagination: {
            total: methodTotal,
            size: 100,
            page: 1,
        },
    } as API.TableListResult;    
    return tablelist;
};

const columns: TableColumnItem[] = [
    ...baseColumns,
    {
        title: '操作',
        width: 220,
        dataIndex: 'ACTION',
        align: 'center',
        actions: ({ record }) => [
            {
                label: '编辑',
                icon: h(EditOutlined),
                onClick: () => openGroupModal(record),
            },
            {
                label: '查看引用',
                icon: h(EditOutlined),
                onClick: () => openGroupModal(record),
            },
            {
                label: '删除',
                danger: true,
                icon: h(DeleteOutlined),
                popConfirm: {
                    title: '你确定要删除吗？',
                    onConfirm: () => delRowConfirm(record.id),
                },
            },
        ],
    },
];

onMounted(() => {

});
</script>